<template>
  <div class="home">
    <div class="header">
      <x-header :left-options="{ showBack: false }">
        <header-title :title="$t('home.home')" />
        <a slot="left" @click="onClose">{{ $t('common.close') }}</a>
        <a slot="right" @click="onSetting">{{ $t('common.setting') }}</a>
      </x-header>
    </div>

    <div class="content">
      <group>
        <cell
          :title="$t('home.showContacts')"
          is-link
          @click.native="addPerson"
        />
        <cell
          :title="$t('home.upOrDownloadFile')"
          is-link
          @click.native="routeFile"
        />
        <cell
          :title="$t('home.notice')"
          is-link
          @click.native="notice"
        />
        <cell
          :title="$t('home.customerService')"
          is-link
          @click.native="customerService"
        />
      </group>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { InlineLoading, XButton, XHeader, Group, Cell } from 'vux';
import HeaderTitle from '@/components/common/HeaderTitle';
import { me } from '@/api/login';
import { thirdpartiesSetting, getServiceAddress } from '@/api/home';

export default {
  name: 'Home',
  components: {
    InlineLoading,
    XButton,
    XHeader,
    HeaderTitle,
    Group,
    Cell,
  },
  computed: {
    ...mapState(['me', 'home']),
  },
  created() {
    this.saveDoodHost();
    this.userInfo();
    // FIXME (CFY) 测试 logan 代码
    this.$logan.log('welcome to home page');
  },
  methods: {
    ...mapActions(['setDoodHost']),
    // 获取用户信息
    userInfo() {
      me().then((data) => {
        if (data.status === 200 && data.data.userRole !== '') {
          // FIXME (cfy) 测试代码
          this.$logan.log('用户登录成功');
          this.$store.commit('me', data.data);
        }
      });
    },
    addPerson() {
      this.$router.push({ path: '/address-book' });
    },
    routeFile() {
      this.$router.push({ path: '/file' });
    },
    notice() {
      this.$router.push({ path: '/message' });
    },
    onSetting() {
      this.$router.push({ path: '/setting' });
    },
    async saveDoodHost() {
      // FIXME(ZK) 查询第三方配置信息默认id写死传1查询豆豆配置
      const res = await thirdpartiesSetting('1');
      if (res.data && res.data.serverUrl) {
        const index = res.data.serverUrl.indexOf('/platform/api2');
        if (index > 0) {
          const doodHost = res.data.serverUrl.substring(0, index);
          this.setDoodHost(doodHost);
        }
      }
    },
    onClose() {
      vrv.jssdk.closeView({});
    },
    // 跳转到客户服务中心
    async customerService() {
      /**
       * FIXME(CFY) 在豆豆里面需要用 jssdk 跳转方法，两个应用切换需要
       * 考虑页面 token 保存的问题。
       */
      // const res = await getServiceAddress();
      // window.location.href = res.data;
      // 显示客服说明页面
      this.$router.push('/customer-service');
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  background-color: #f6f6f6;
  height: 100%;
  .header {
    position: relative;
    height: 45px;
  }
  /deep/ .vux-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
  }
  .content {
    height: calc(100% - 45px);
    .demo-button {
      width:80%;
      top: 40%;
    }
  }
}
</style>
